var myChartc = echarts.init(document.getElementById("circular"));

function getcircular() {
  $.ajax({
    url: baseUrl + "/failure",
    type: "POST",
    dataType: "json",
    success: function (data) {
      circularData(data.data);
    },
    // 超时时间
    timeout: 4000,
    // 失败的回调
    error: function () {
      alert("圆形统计图请求数据失败！");
    },
  });
}
function circularData(res) {
  //设备总数
  var allNUm = JSON.stringify(res.equipment_num);
  //设备故障率
  let fault = {
    num: 100,
    percentage: res.equipment_ure_num,
    default: 100 - res.equipment_ure_num,
  };
  //每月故障率
  var monthNum = {
    num: 100,
    percentage: res.month,
    default: 100 - res.month,
  };
  //每周故障率
  var weekNum = {
    num: 100,
    percentage: res.week,
    default: 100 - res.week,
  };

  optionc = {
    tooltip: {
      trigger: "item",
    },
    calculable: false,
    series: [
      {
        name: "",
        type: "pie",
        radius: ["60%", "70%"],
        center: ["12.4%", "59.2%"],
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          //饼图中间文字设置
          normal: {
            show: true,
            position: "center",
            color: "#F59927",
            formatter: fault.percentage + "%",
            fontSize: 30,
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        data: [
          {
            value: fault.percentage,
            name: "设备故障率",
            itemStyle: {
              normal: {
                color: "#F59927",
              },
            },
          },
          {
            value: fault.default,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent", // 透明色
              },
            },
            hoverAnimation: false,
            label: { show: false },
          },
        ],
      },
      {
        //设备故障率外圆
        name: "",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ["70%", "74%"], //边框大小
        center: ["12.4%", "59.2%"],
        label: {
          //去掉直角
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: "#F59927",
              },
            },
          },
        ],
      },
      {
        name: "设备总数",
        type: "pie",
        radius: ["70%", "74%"],
        center: ["37.5%", "59.2%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          color: "#544BD5",
        },
        label: {
          //饼图中间文字设置
          normal: {
            show: true,
            position: "center",
            color: "#544BD5",
            formatter: allNUm,
            fontSize: 30,
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [{ value: allNUm, name: "" }],
      },
      {
        name: "",
        type: "pie",
        radius: ["60%", "70%"],
        center: ["62.7%", "59.2%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          //饼图中间文字设置
          normal: {
            show: true,
            position: "center",
            color: "#DBC632",
            formatter: monthNum.percentage + "%", //字符串
            fontSize: 30,
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [
          {
            value: monthNum.percentage,
            name: "每月故障率",
            itemStyle: {
              normal: {
                color: "#DBC632",
              },
            },
          },
          {
            value: monthNum.default,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent", // 透明色
              },
            },
            hoverAnimation: false,
            label: { show: false },
          },
        ],
      },
      {
        //每月故障率外圆
        name: "",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ["70%", "74%"], //边框大小
        center: ["62.7%", "59.2%"],
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: "#DBC632",
              },
            },
          },
        ],
      },
      {
        //每周故障率
        name: "",
        type: "pie",
        radius: ["60%", "70%"],
        center: ["87.6%", "59.2%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          //饼图中间文字设置
          normal: {
            show: true,
            position: "center",
            color: "#209883",
            formatter: weekNum.percentage + "%", //字符串
            fontSize: 30,
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [
          {
            value: weekNum.percentage,
            name: "每周故障率",
            itemStyle: {
              normal: {
                color: "#209883",
              },
            },
          },
          {
            value: weekNum.default,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent", // 透明色
              },
            },
            hoverAnimation: false,
            label: { show: false },
          },
        ],
      },
      {
        //每周故障率外圆
        name: "",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ["70%", "74%"], //边框大小
        center: ["87.6%", "59.2%"],
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: "#209883",
              },
            },
          },
        ],
      },
    ],
  };
  // 为echarts对象加载数据
  myChartc.setOption(optionc);
}
//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可
window.onresize = function () {
  myChartc.resize();
};
